import { Card, DatePicker, FormProps, Space, Table, TableProps } from "antd"

import { OrderStatus } from "@/utils/enum";
import { OrderItem, OrderParams } from "@/types/order";
import { getConditionSearchApi } from "@/api/order";
import dayjs from "dayjs";
import { PreviewOrder } from './previewOrder'
import { CancelOrder } from './cancelOrder'
import { PreviewOrderRef } from "@/types/childCompRef";
export const Component = () => {
  const { RangePicker } = DatePicker;
  const columns: TableProps<OrderItem>['columns'] = [
    {
      title: '订单号',
      dataIndex: 'number',
      key: 'number',
      align: "center"
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      key: 'status',
      align: "center",
      render: (data: number) => {
        return <div>{OrderStatus[data - 1].name}</div>
      }
    },
    {
      title: '用户名',
      dataIndex: 'consignee',
      key: 'consignee',
      align: "center"
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      align: "center",
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: "center",
    },
    {
      title: '下单时间',
      dataIndex: 'orderTime',
      key: 'orderTime',
      align: "center"
    },
    {
      title: '实收金额',
      dataIndex: 'amount',
      key: 'amount',
      align: "center"
    },
    {
      title: '操作',
      align: "center",
      render: (data: OrderItem) => {
        return (
          <Space size="middle">
            {data.status === 1 && <a style={{ color: "red" }} onClick={() => onCancel(data)}>取消</a>}
            <a style={{ color: "#0e8b8d" }} onClick={() => onPreview(data)}>查看</a>
          </Space >
        )
      },
    },
  ];
  // 定义数据
  const [orderList, setOrderList] = useState<OrderItem[]>([])
  // 定义总数
  const [total, setTotal] = useState(0)
  // 定义参数
  const [orderQuery, setOrderQuery] = useState<OrderParams>({
    name: '',
    page: 1,
    pageSize: 10,
    beginTime: '',
    endTime: '',
    number: '',
    phone: '',
    status: '',
    userId: ''
  })
  // 修改页码
  const changePage = (page: number, pageSize: number) => {
    setOrderQuery({
      ...orderQuery,
      page,
      pageSize,
    })
  }
  // 获取数据
  useEffect(() => {
    const getConditionList = async () => {
      // 发请求获取数据
      const res = await getConditionSearchApi(orderQuery)
      const { data } = res
      setTotal(data.total)
      setOrderList(data.records)
    }
    getConditionList()
  }, [orderQuery])

  const onFinish: FormProps<OrderParams>['onFinish'] = (values) => {
    setOrderQuery({
      ...orderQuery,
      number: values.number,
      phone: values.phone,
      beginTime: values.time ? dayjs(values.time[0]).format('YYYY-MM-DD') + ' 00:00:00' : undefined,
      endTime: values.time ? dayjs(values.time[1]).format('YYYY-MM-DD') + ' 23:59:59' : undefined,
    })
  };
  // 获取组件的ref
  const previewOrder = useRef<PreviewOrderRef>(null)
  const cancelOrder = useRef<PreviewOrderRef>(null)
  // 获取订单的id
  const [orderId, setOrderId] = useState<number>()
  // 取消
  const onCancel = (data: OrderItem) => {
    setOrderId(data.id)
    cancelOrder.current!.showModal()
  }
  // 查看
  const onPreview = (data: OrderItem) => {
    setOrderId(data.id)
    previewOrder.current!.showModal()
    previewOrder.current!.getOrderDetail(data.id)
  }

  const onSuccess = useCallback(() => {
    previewOrder.current!.showModal()
    setOrderQuery({
      ...orderQuery,
      number: orderQuery.number,
      phone: orderQuery.phone,
      beginTime: orderQuery.time ? dayjs(orderQuery.time[0]).format('YYYY-MM-DD') + ' 00:00:00' : undefined,
      endTime: orderQuery.time ? dayjs(orderQuery.time[1]).format('YYYY-MM-DD') + ' 23:59:59' : undefined,
    })
  }, [])


  return (
    <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
      {/* 查询 */}
      <Card className="mb-4">
        <div className="flex flex-justify-between">
          <Form
            name="basic"
            layout="inline"
            labelCol={{ span: 6 }}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item<OrderParams>
              label="订单号"
              name="number"
            >
              <Input placeholder="请输入订单号" allowClear />
            </Form.Item>
            <Form.Item<OrderParams>
              label="手机号"
              name="phone"
            >
              <Input placeholder="请输入手机号" allowClear />
            </Form.Item>
            <Form.Item label="下单时间" name="time">
              <RangePicker />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Card>
      {/* 表格 */}
      <Card style={{ overflow: 'auto', height: 'calc(100% - 98px)' }}>
        <Table<OrderItem> rowKey="id" bordered dataSource={orderList} columns={columns} pagination={
          {
            total: total,
            showQuickJumper: true,
            showSizeChanger: true,
            showTotal: (total) => `总数 ${total} 条`,
            position: ["bottomCenter"],
            onChange: (page, pageSize) => changePage(page, pageSize)
          }
        } />
        <PreviewOrder ref={previewOrder} />
        <CancelOrder ref={cancelOrder} orderId={orderId} onSuccess={onSuccess} />
      </Card>
    </div>
  )
}
